Uso
O uso mais comum do parâmetro float é em uma imagem onde ela deve ficar cercada por um texto, como num jornal. Dá um efeito muito bom evitando espaços em branco perdidos na página e dá uma idéia de um visual mais bem elaborado.
Fluxo dos objetos dentro do documento e o style Float :
A disposição e a exibição dos elementos dentro do documento web seguem regras
determinadas pelo browser que exibe um depois do outro mas as regras não são
explicitas intuitivamente.
Esta página mostra a exibição e influência do style Float na exibição do texto
e da imagem dentro do parágrafo. É o mesmo efeito utilizado num jornal para publicar
uma notícia.
Suponha que você quer exibir um texto pequeno e logo a seguir uma imagem e outro texto
pequeno como no exemplo abaixo :
<p>
Texto antes da imagem1 :
<img src="../imagens/familia-pelho.jpg" />
Texto depois da imagem. <br />
</p>
Ficaria assim:
Texto antes da imagem1 :
Texto depois da imagem.
Note também que quando são escritos na mesma linha a altura dos itens é definida como a máxima dos ítens que o da imagem.
Os elementos html texto e imagem são exibidos com as características display:inline por padrão pelo browser.
Mas se você tiver um texto e LONGO e logo a seguir uma imagem seguida por um texto curto :
<p>
Texto longo antes da imagem :
<img src="../imagens/familia-pelho.jpg" />
Texto depois da imagem. <br />
</p>
Ficaria assim:
Texto antes da imagem1 :
A fundação em 1932 ocorreu no momento da descoberta econônica do interior do Paraná. A
família Pelho, tradicional da região, investiu todas as suas economias nessa nova iniciativa,
revolucionária para a época. O fundador Eduardo Simões Pelho, dotado de particular visão
administrativa, guiou os negócios da empresa durante mais de 50 anos, muitos deles ao lado
de seu filho E. S. Pelho Filho, atual CEO. O nome da empresa é inspirado no nome da família.
O crescimento da empresa foi praticamente instantâneo. Nos primeiros 5 anos, já atendia 18 países.
Bateu a marca de 100 países em apenas 15 anos de existência. Até hoje, já atendeu 740 milhões
de usuários diferentes, em bilhões de diferentes pedidos.
O crescimento em número de funcionários é também assombroso. Hoje, é a maior empregadora do
Brasil, mas mesmo após apenas 5 anos de sua existência, já possuía 30 mil funcionários. Fora do
Brasil, há 240 mil funcionários, além dos 890 mil brasileiros nas instalações de Jacarezinho e
nos escritórios em todo país.
Dada a importância econômica da empresa para o Brasil, a família Pelho já recebeu diversos prêmios,
homenagens e condecorações. Todos os presidentes do Brasil já visitaram as instalações da Mirror
Fashion, além de presidentes da União Européia, Ásia e o secretário-geral da ONU.
Texto depois da imagem.
Note que como o texto é extenso acabou ocupando a linha inteira.
Mesmo assim, a imagem foi exibida logo a seguir a partir do término da última linha de texto. Note também que, quando escritos em linhas diferentes cada um ocupa o espaço vertical que precisa independente dos itens que são escritos nas outras linhas.
Supondo agora que você defina que a imagem flutua no texto, ou seja, a imagem pode ser alinhada em relação e independente do texto. Vamos definir como float:right :
Como foi definido :
<p>
Texto antes da imagem :Texto Longo
<img style="float:right" src="../imagens/familia-pelho.jpg" />
Texto depois da imagem.
</p>
Como será exibido:
Texto antes da imagem :
A fundação em 1932 ocorreu no momento da descoberta econônica do interior do Paraná. A
família Pelho, tradicional da região, investiu todas as suas economias nessa nova iniciativa,
revolucionária para a época. O fundador Eduardo Simões Pelho, dotado de particular visão
administrativa, guiou os negócios da empresa durante mais de 50 anos, muitos deles ao lado
de seu filho E. S. Pelho Filho, atual CEO. O nome da empresa é inspirado no nome da família.
O crescimento da empresa foi praticamente instantâneo. Nos primeiros 5 anos, já atendia 18 países.
Bateu a marca de 100 países em apenas 15 anos de existência. Até hoje, já atendeu 740 milhões
de usuários diferentes, em bilhões de diferentes pedidos.
O crescimento em número de funcionários é também assombroso. Hoje, é a maior empregadora do
Brasil, mas mesmo após apenas 5 anos de sua existência, já possuía 30 mil funcionários. Fora do
Brasil, há 240 mil funcionários, além dos 890 mil brasileiros nas instalações de Jacarezinho e
nos escritórios em todo país.
Dada a importância econômica da empresa para o Brasil, a família Pelho já recebeu diversos prêmios,
homenagens e condecorações. Todos os presidentes do Brasil já visitaram as instalações da Mirror
Fashion, além de presidentes da União Européia, Ásia e o secretário-geral da ONU.
Texto depois da imagem.
Parece que a imagem flutua em relação a última linha do texto.
Definindo qua a imagem flutua a esquerda do texto ( float:left )fica assim :
Texto antes da imagem :
A fundação em 1932 ocorreu no momento da descoberta econônica do interior do Paraná. A
família Pelho, tradicional da região, investiu todas as suas economias nessa nova iniciativa,
revolucionária para a época. O fundador Eduardo Simões Pelho, dotado de particular visão
administrativa, guiou os negócios da empresa durante mais de 50 anos, muitos deles ao lado
de seu filho E. S. Pelho Filho, atual CEO. O nome da empresa é inspirado no nome da família.
O crescimento da empresa foi praticamente instantâneo. Nos primeiros 5 anos, já atendia 18 países.
Bateu a marca de 100 países em apenas 15 anos de existência. Até hoje, já atendeu 740 milhões
de usuários diferentes, em bilhões de diferentes pedidos.
O crescimento em número de funcionários é também assombroso. Hoje, é a maior empregadora do
Brasil, mas mesmo após apenas 5 anos de sua existência, já possuía 30 mil funcionários. Fora do
Brasil, há 240 mil funcionários, além dos 890 mil brasileiros nas instalações de Jacarezinho e
nos escritórios em todo país.
Dada a importância econômica da empresa para o Brasil, a família Pelho já recebeu diversos prêmios,
homenagens e condecorações. Todos os presidentes do Brasil já visitaram as instalações da Mirror
Fashion, além de presidentes da União Européia, Ásia e o secretário-geral da ONU.
Texto depois da imagem.
Parece que a imagem flutua em relação a última linha do texto.
Mas queremos que ela seja alinhada junto com o texto, com o topo do texto.
Os itens acima são Texto, Imagem, Texto
Definiremos então a imagem e depois o texto. A ordem ficou a seguinte : Imagem, texto
Como foi codificado:
<p>
<img style="float:right; background-position:top right" src="../imagens/familia-pelho.jpg" />
Texto depois da imagem : Texto Longo
</p>
Como será exibido:
Texto depois da imagem :
A fundação em 1932 ocorreu no momento da descoberta econônica do interior do Paraná. A
família Pelho, tradicional da região, investiu todas as suas economias nessa nova iniciativa,
revolucionária para a época. O fundador Eduardo Simões Pelho, dotado de particular visão
administrativa, guiou os negócios da empresa durante mais de 50 anos, muitos deles ao lado
de seu filho E. S. Pelho Filho, atual CEO. O nome da empresa é inspirado no nome da família.
O crescimento da empresa foi praticamente instantâneo. Nos primeiros 5 anos, já atendia 18 países.
Bateu a marca de 100 países em apenas 15 anos de existência. Até hoje, já atendeu 740 milhões
de usuários diferentes, em bilhões de diferentes pedidos.
O crescimento em número de funcionários é também assombroso. Hoje, é a maior empregadora do
Brasil, mas mesmo após apenas 5 anos de sua existência, já possuía 30 mil funcionários. Fora do
Brasil, há 240 mil funcionários, além dos 890 mil brasileiros nas instalações de Jacarezinho e
nos escritórios em todo país.
Dada a importância econômica da empresa para o Brasil, a família Pelho já recebeu diversos prêmios,
homenagens e condecorações. Todos os presidentes do Brasil já visitaram as instalações da Mirror
Fashion, além de presidentes da União Européia, Ásia e o secretário-geral da ONU.
Note que a tag p atuou como container de conteúdo fazendo tanto a imagem quanto o texto serem exibidos dentro do parágrafo.
Agora se definirmos que o parágrafo que contém o texto e a imagem não ocupam a folha inteira.
Como foi codificado:
<p style="width:95%">
<img style="float:right; background-position:top right" src="../imagens/familia-pelho.jpg" />
Texto depois da imagem :Texto grande.
</p>
Como será exibido:
Texto depois da imagem :
A fundação em 1932 ocorreu no momento da descoberta econônica do interior do Paraná. A
família Pelho, tradicional da região, investiu todas as suas economias nessa nova iniciativa,
revolucionária para a época. O fundador Eduardo Simões Pelho, dotado de particular visão
administrativa, guiou os negócios da empresa durante mais de 50 anos, muitos deles ao lado
de seu filho E. S. Pelho Filho, atual CEO. O nome da empresa é inspirado no nome da família.
O crescimento da empresa foi praticamente instantâneo. Nos primeiros 5 anos, já atendia 18 países.
Bateu a marca de 100 países em apenas 15 anos de existência. Até hoje, já atendeu 740 milhões
de usuários diferentes, em bilhões de diferentes pedidos.
O crescimento em número de funcionários é também assombroso. Hoje, é a maior empregadora do
Brasil, mas mesmo após apenas 5 anos de sua existência, já possuía 30 mil funcionários. Fora do
Brasil, há 240 mil funcionários, além dos 890 mil brasileiros nas instalações de Jacarezinho e
nos escritórios em todo país.
Dada a importância econômica da empresa para o Brasil, a família Pelho já recebeu diversos prêmios,
homenagens e condecorações. Todos os presidentes do Brasil já visitaram as instalações da Mirror
Fashion, além de presidentes da União Européia, Ásia e o secretário-geral da ONU.
Colocando uma margem a esquerda do parágrafo de texto.
Como foi codificado:
<p style="width:95%; margin-left:40px">
<img style="float:right; background-position:top right" src="../imagens/familia-pelho.jpg" />
Texto depois da imagem : Texto grande.
</p>
Como será exibido:
Texto depois da imagem :
A fundação em 1932 ocorreu no momento da descoberta econônica do interior do Paraná. A
família Pelho, tradicional da região, investiu todas as suas economias nessa nova iniciativa,
revolucionária para a época. O fundador Eduardo Simões Pelho, dotado de particular visão
administrativa, guiou os negócios da empresa durante mais de 50 anos, muitos deles ao lado
de seu filho E. S. Pelho Filho, atual CEO. O nome da empresa é inspirado no nome da família.
O crescimento da empresa foi praticamente instantâneo. Nos primeiros 5 anos, já atendia 18 países.
Bateu a marca de 100 países em apenas 15 anos de existência. Até hoje, já atendeu 740 milhões
de usuários diferentes, em bilhões de diferentes pedidos.
O crescimento em número de funcionários é também assombroso. Hoje, é a maior empregadora do
Brasil, mas mesmo após apenas 5 anos de sua existência, já possuía 30 mil funcionários. Fora do
Brasil, há 240 mil funcionários, além dos 890 mil brasileiros nas instalações de Jacarezinho e
nos escritórios em todo país.
Dada a importância econômica da empresa para o Brasil, a família Pelho já recebeu diversos prêmios,
homenagens e condecorações. Todos os presidentes do Brasil já visitaram as instalações da Mirror
Fashion, além de presidentes da União Européia, Ásia e o secretário-geral da ONU.
Colocando uma margem na imagem :
Codificação:
<p style="width:95%; margin-left:40px">
<img style="float:right; background-position:top right ;margin:20px;" src="../imagens/familia-pelho.jpg" alt="Familia Pelho" />
Texto depois da imagem :Texto grande
</p>
Como é exibido:
Texto depois da imagem :
A fundação em 1932 ocorreu no momento da descoberta econônica do interior do Paraná. A
família Pelho, tradicional da região, investiu todas as suas economias nessa nova iniciativa,
revolucionária para a época. O fundador Eduardo Simões Pelho, dotado de particular visão
administrativa, guiou os negócios da empresa durante mais de 50 anos, muitos deles ao lado
de seu filho E. S. Pelho Filho, atual CEO. O nome da empresa é inspirado no nome da família.
O crescimento da empresa foi praticamente instantâneo. Nos primeiros 5 anos, já atendia 18 países.
Bateu a marca de 100 países em apenas 15 anos de existência. Até hoje, já atendeu 740 milhões
de usuários diferentes, em bilhões de diferentes pedidos.
O crescimento em número de funcionários é também assombroso. Hoje, é a maior empregadora do
Brasil, mas mesmo após apenas 5 anos de sua existência, já possuía 30 mil funcionários. Fora do
Brasil, há 240 mil funcionários, além dos 890 mil brasileiros nas instalações de Jacarezinho e
nos escritórios em todo país.
Dada a importância econômica da empresa para o Brasil, a família Pelho já recebeu diversos prêmios,
homenagens e condecorações. Todos os presidentes do Brasil já visitaram as instalações da Mirror
Fashion, além de presidentes da União Européia, Ásia e o secretário-geral da ONU.
Ficou bem próximo da imagem que o site exigia:
Isso não acontece por padrão. Repare que, observando as tags HTML que usamos até agora, os elementos da página são desenhados um em baixo do outro.
No modo comum, normal, seria exida a imagem na linha superior e o texto logo abaixo.
É como se cada elemento fosse uma caixa (box) e o padrão é empilhar essas caixas verticalmente.
Mais pra frente vamos entender melhor esse algoritmo, mas agora o importante é que ele atrapalha esse nosso design.
Temos um problema: a tag <figure> ocupa toda a largura da página e aparece empilhada no fluxo
do documento, não permitindo que outros elementos sejam adicionados ao seu lado.
Este problema pode ser solucionado por meio da propriedade float.
Esta propriedade permite que tiremos um certo elemento do fluxo vertical do documento, o que faz com que o conteúdo abaixo dele flua ao seu redor.
Na prática, vai fazer exatamente o layout que queremos.
Em nosso exemplo, o conteúdo do parágrafo tentará fluir ao redor da nossa imagem com float.
Perceba que houve uma perturbação do fluxo HTML, pois agora a nossa imagem parece existir fora do fluxo.
Não ficou igual porque tem que se aplicar mais estilos via css entre outros efeitos de design.
Importante : Infelizmente o Float só tem à direita e à esquerda. Não possui center, middle ou coisa parecida.